// render.jsx
import { defineComponent,ref } from 'vue'
import Prism from 'prismjs'

export default defineComponent({
  name:"styleEditor",
  props:['code'],
  setup(props,context) {
    const styleEditor = ref(null);

    function toBottom () {
        if (styleEditor.value) {
            styleEditor.value.scrollTop = styleEditor.value.scrollHeight+10000;
        }
    }
    context.expose({
      toBottom
    });
    const render = () => {
        const highlightCode = Prism.highlight(props.code, Prism.languages.css);

        return <div ref={styleEditor} className='styleEditor'>
            <style v-html={props.code}></style>

            <pre v-html={highlightCode}></pre>
        </div>
    }
    return render
  },
  // render(){
  //   const highlightCode = Prism.highlight(this.$props.code, Prism.languages.css);
  //     console.log(this.styleEditor)
  //   return(
  //     <>
  //     {/* <div ref={this.styleEditor.value} className='styleEditor'>
  //           <style v-html={this.$props.code}></style>

  //           <pre v-html={highlightCode}></pre>
  //       </div> */}
  //     </>
  //   )
  // }
  
})